<template>
  <div class="defect-management-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>不合格品管理</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleCreate"
              >新建不合格品单</el-button
            >
            <el-button type="success" @click="handleAnalysis"
              >不良分析</el-button
            >
          </div>
        </div>
      </template>

      <el-form :inline="true" :model="queryForm" class="search-form">
        <el-form-item label="不合格品单号">
          <el-input v-model="queryForm.defectNo" placeholder="请输入单号" />
        </el-form-item>
        <el-form-item label="来源类型">
          <el-select
            v-model="queryForm.sourceType"
            placeholder="请选择来源"
            clearable
          >
            <el-option label="来料检验" value="incoming" />
            <el-option label="过程检验" value="process" />
            <el-option label="成品检验" value="final" />
            <el-option label="客户投诉" value="complaint" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品信息">
          <el-input
            v-model="queryForm.productInfo"
            placeholder="产品编码/名称"
          />
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select
            v-model="queryForm.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="待处理" value="pending" />
            <el-option label="处理中" value="processing" />
            <el-option label="已完成" value="completed" />
            <el-option label="已关闭" value="closed" />
          </el-select>
        </el-form-item>
        <el-form-item label="发现日期">
          <el-date-picker
            v-model="queryForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="defectNo" label="不合格品单号" width="160" />
        <el-table-column prop="sourceType" label="来源类型" width="120">
          <template #default="scope">
            {{ getSourceTypeText(scope.row.sourceType) }}
          </template>
        </el-table-column>
        <el-table-column prop="productCode" label="产品编码" width="120" />
        <el-table-column prop="productName" label="产品名称" min-width="120" />
        <el-table-column
          prop="defectDesc"
          label="不合格现象"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column prop="discoverer" label="发现人" width="100" />
        <el-table-column prop="discoveryTime" label="发现时间" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleDetail(scope.row)"
              >详情</el-button
            >
            <el-button
              v-if="scope.row.status === 'pending'"
              link
              type="primary"
              @click="handleProcess(scope.row)"
            >
              处理
            </el-button>
            <el-button link type="primary" @click="handleCost(scope.row)"
              >成本</el-button
            >
            <el-button
              v-if="scope.row.status === 'completed'"
              link
              type="success"
              @click="handleClose(scope.row)"
            >
              关闭
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 处理对话框 -->
    <el-dialog
      v-model="processDialogVisible"
      title="不合格品处理"
      width="600px"
    >
      <el-form ref="processFormRef" :model="processForm" label-width="100px">
        <el-form-item label="处理方式" prop="method">
          <el-select
            v-model="processForm.method"
            placeholder="请选择处理方式"
            style="width: 100%"
          >
            <el-option label="返工" value="rework" />
            <el-option label="返修" value="repair" />
            <el-option label="报废" value="scrap" />
            <el-option label="让步接收" value="concession" />
          </el-select>
        </el-form-item>
        <el-form-item label="责任部门" prop="department">
          <el-select
            v-model="processForm.department"
            placeholder="请选择责任部门"
            style="width: 100%"
          >
            <el-option label="生产部" value="production" />
            <el-option label="质量部" value="quality" />
            <el-option label="技术部" value="technology" />
            <el-option label="采购部" value="purchase" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理意见" prop="opinion">
          <el-input
            v-model="processForm.opinion"
            type="textarea"
            rows="3"
            placeholder="请输入处理意见"
          />
        </el-form-item>
        <el-form-item label="改进措施" prop="improvement">
          <el-input
            v-model="processForm.improvement"
            type="textarea"
            rows="3"
            placeholder="请输入改进措施"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="processDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleProcessSubmit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 查询表单
const queryForm = reactive({
  defectNo: "",
  sourceType: "",
  productInfo: "",
  status: "",
  dateRange: [],
});

// 表格数据
const tableData = ref([
  {
    defectNo: "NC202403150001",
    sourceType: "incoming",
    productCode: "PC100234",
    productName: "精密轴承",
    defectDesc: "外观存在划痕，不符合验收标准",
    discoverer: "张三",
    discoveryTime: "2024-03-15 09:30:00",
    status: "pending",
    batchNo: "BT20240315001",
    quantity: 50,
    department: "质量部",
    remark: "需要与供应商沟通",
  },
  {
    defectNo: "NC202403150002",
    sourceType: "process",
    productCode: "PC100567",
    productName: "控制阀体",
    defectDesc: "焊接处出现气孔",
    discoverer: "李四",
    discoveryTime: "2024-03-15 10:45:00",
    status: "processing",
    batchNo: "BT20240315002",
    quantity: 10,
    department: "生产部",
    remark: "正在返工处理",
  },
  {
    defectNo: "NC202403150003",
    sourceType: "final",
    productCode: "PC100789",
    productName: "电机组件",
    defectDesc: "性能测试不达标",
    discoverer: "王五",
    discoveryTime: "2024-03-15 14:20:00",
    status: "completed",
    batchNo: "BT20240315003",
    quantity: 5,
    department: "技术部",
    remark: "已完成返修",
  },
]);

// 分页数据
const total = ref(3);
const currentPage = ref(1);
const pageSize = ref(10);

// 处理表单
const processDialogVisible = ref(false);
const processFormRef = ref(null);
const processForm = reactive({
  method: "",
  department: "",
  opinion: "",
  improvement: "",
});

// 来源类型显示
const getSourceTypeText = (type) => {
  const typeMap = {
    incoming: "来料检验",
    process: "过程检验",
    final: "成品检验",
    complaint: "客户投诉",
  };
  return typeMap[type];
};

// 状态显示
const getStatusType = (status) => {
  const statusMap = {
    pending: "warning",
    processing: "primary",
    completed: "success",
    closed: "info",
  };
  return statusMap[status];
};

const getStatusText = (status) => {
  const statusMap = {
    pending: "待处理",
    processing: "处理中",
    completed: "已完成",
    closed: "已关闭",
  };
  return statusMap[status];
};

// 处理函数
const handleSearch = () => {
  ElMessage.success("查询成功");
};

const handleReset = () => {
  Object.keys(queryForm).forEach((key) => {
    queryForm[key] = "";
  });
  queryForm.dateRange = [];
};

const handleCreate = () => {
  ElMessage.success("新建不合格品单");
};

const handleAnalysis = () => {
  ElMessage.success("打开不良分析");
};

const handleDetail = (row) => {
  ElMessage.success(`查看详情：${row.defectNo}`);
};

const handleProcess = (row) => {
  processDialogVisible.value = true;
  processForm.method = "";
  processForm.department = "";
  processForm.opinion = "";
  processForm.improvement = "";
};

const handleProcessSubmit = () => {
  ElMessage.success("提交成功");
  processDialogVisible.value = false;
};

const handleCost = (row) => {
  ElMessage.success(`查看成本：${row.defectNo}`);
};

const handleClose = (row) => {
  ElMessageBox.confirm("确认关闭该不合格品单？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage.success("关闭成功");
  });
};

const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};
</script>

<style scoped>
.defect-management-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.dialog-footer {
  padding-top: 20px;
  text-align: right;
}
</style>
